<template>
  <div class="contentWrap">
    <div class="cUp">
      <div class="logo">
        <img src="//yanxuan.nosdn.127.net/bd139d2c42205f749cd4ab78fa3d6c60.png" alt="">
      </div>
      <div class="btns">
        <div class="phoneLogin" @click="$router.push('/profile/logbyphone')">
          <i class="phonePic"></i>
          <span>手机号码登录</span>
        </div>
        <div class="emailLogin" @click="$router.push('/profile/logbyemail')">
          <i class="emailPic"></i>
          <span>邮箱账号登录</span>
        </div>
        <!--模拟使用mintui的button-->
        <!--<mt-button type="default" size="large">
          <img slot="icon">
          手机号码登录
        </mt-button>-->
        <div class="numRegister" @click="$router.push('/profile/regbyphone')">
          <span>手机号快捷注册 > </span>
          <i class="right"></i>
        </div>
      </div>
    </div>
    <div class="cBottom">
      <div class="wechat">
        <i class="icon"></i>
        <span class="name">微信&nbsp&nbsp&nbsp&nbsp|</span>
      </div>
      <div class="qq">
        <i class="icon"></i>
        <span class="name">QQ&nbsp&nbsp&nbsp&nbsp|</span>
      </div>
      <div class="webo">
        <i class="icon"></i>
        <span class="name">微博</span>
      </div>
    </div>
  </div>
</template>

<script>
  
  export default {
    name: 'index',
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .contentWrap
    box-sizing: border-box
    padding-top 176px
    width 100%
    height 1408px
    background #F2F5F4
    .cUp
      height 351px
      .logo
        padding 80px 0
        height 205px
        line-height 205px
        text-align: center
        img
          width 268px
          height 90px
      .btns
        height 292px
        box-sizing border-box
        margin 0 0 204px
        padding 0 40px
        .phoneLogin, .emailLogin
          height 94px
          background: #B4282D
          margin 0 0 32px
          font-size 28px
          line-height 94px
          text-align: center
          color #fff
          i
            display inline-block
            vertical-align middle
            width 40px
            height 40px
            background url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/login-s2d0d826858-156f617841.png")
            background-position 20% 20%
            background-size 100%
        .emailLogin
          background transparent
          border 1px solid #B4282D
          color #B4282D
          i
            background url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/login-s2d0d826858-156f617841.png")
            background-position 20% 2%
            background-size 100%
        
        .numRegister
          text-align: center
    
    .cBottom
      height 40px
      line-height 40px
      margin-top 700px
      padding 0 160px
      display flex
      justify-content: space-between
      i
        display inline-block
        vertical-align middle
        width 40px
        height 40px
        background url("")
        background-size 100%
      .qq
        i
          background url("")
          background-size 100%
      .webo
        i
          background url("")
          background-size 100%
</style>
